<template>
    <div>
      <h2>购物车</h2>
      <ul>
        <li v-for="product in cartProducts" :key="product.id">
          {{ product.name }} - {{ product.price }} x {{ product.quantity }}
          <button @click="removeFromCart(product.id)">Remove</button>
        </li>
      </ul>
      <hr>
      <p>Total: {{ cartTotal }}</p>
    </div>
  </template>
  
  <script>
  import { mapGetters, mapActions } from 'vuex';
  
  export default {
    computed: {
      ...mapGetters(['cartProducts', 'cartTotal'])
    },
    methods: {
      ...mapActions(['removeProductFromCart']),
      removeFromCart(productId) {
        this.removeProductFromCart(productId);
      }
    }
  };
  </script>